import React, { useState } from 'react';

import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme, ConfigProvider, Button, Select } from 'antd';
import { NavLink, Outlet } from 'react-router-dom';
import router, { routerlist } from '../router';
import { useTranslation } from 'react-i18next';
import Index from '../components';

function Home() {
    const { Header, Content, Footer, Sider } = Layout;

    const [t, i18n] = useTranslation()

    type MenuItem = Required<MenuProps>['items'][number];

    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }

    const router = (arr) => {
        let list = [];
        arr.forEach((item) => {
            if (item.children) {
                list.push(getItem(
                    <NavLink to={item.path}>{t(item.title)}</NavLink>,
                    item.path,
                    item.icon,
                    router(item.children)
                )
                );
            } else {
                list.push(getItem(<NavLink to={item.path}>{t(item.title)}</NavLink>, item.path, item.icon));
            }
        });
        return list;
    };



    const items = router(routerlist);

    // const items: MenuItem[] = [
    //     getItem('Option 1', '1', <PieChartOutlined />),
    //     getItem('Option 2', '2', <DesktopOutlined />),
    //     getItem('User', 'sub1', <UserOutlined />, [
    //         getItem('Tom', '3'),
    //         getItem('Bill', '4'),
    //         getItem('Alex', '5'),
    //     ]),
    //     getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
    //     getItem('Files', '9', <FileOutlined />),
    // ];

    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();


    const [collor, setcollor] = useState(false)

    return (
        <div>

            <ConfigProvider
                theme={{
                    // 1. 单独使用暗色算法
                    algorithm: collor ? theme.darkAlgorithm : theme.defaultAlgorithm,

                    // 2. 组合使用暗色算法与紧凑算法
                    // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
                }}
            >
                <Layout style={{ minHeight: '100vh' }}>
                    <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                        <div className="demo-logo-vertical" />
                        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
                    </Sider>
                    <Layout>
                        <Header style={{ padding: 0, background: colorBgContainer }} >
                            <Button onClick={() => setcollor(!collor)}>切换主题</Button>
                            {/* <Select
                                value={i18n.language}
                                style={{ width: 120 }}
                                onChange={(value) => i18n.changeLanguage(value)}
                            >
                                <Option value="zh">中文</Option>
                                <Option value="en">英文</Option>
                            </Select> */}


                        </Header>
                        <Content style={{ margin: '0 16px' }}>
                            {/* <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} /> */}
                            <Index></Index>
                            <div
                                style={{
                                    padding: 24,
                                    minHeight: 360,
                                    background: colorBgContainer,
                                    borderRadius: borderRadiusLG,
                                }}
                            >

                                <Outlet></Outlet>
                            </div>
                        </Content>
                        <Footer style={{ textAlign: 'center' }}>
                            Ant Design ©{new Date().getFullYear()} Created by Ant UED
                        </Footer>
                    </Layout>
                </Layout>

            </ConfigProvider>
        </div >
    )
}

export default Home